<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<body>
<div id="popups-form-box">
    <div class="popups-window">
        <form>
            <a class="close" href="#">X</a>
            <span class="title">编辑章节</span>
            <div class="main">
                <table>
                    <tbody>
                    <tr>
                        <td><span class="label">所属文章：</span></td>
                        <td>
                            <select name="novelId">
                                <option value="0">-请选择文章-</option>
                                <option th:each="novel,stats:${novelList}"
                                        th:selected="${novel.id==novelChapter.novelId}"
                                        th:text="${novel.name}"
                                        th:value="${novel.id}">
                                    暂无文章数据
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="label">章节序号：</span></td>
                        <td>
                            <input autoComplete="off" min="1" name="index" placeholder="请输入" required
                                   th:value="${novelChapter.index}" type="number">
                        </td>
                    </tr>
                    <tr>
                        <td><span class="label">章节名称：</span></td>
                        <td>
                            <input autoComplete="off" maxLength="20" minLength="1" name="name" placeholder="1~20位字符"
                                   required th:value="${novelChapter.name}" type="text">
                        </td>
                    </tr>
                    <tr>
                        <td><span class="label">章节内容：</span></td>
                        <td>
                            <textarea maxLength="2000" minLength="1" name="content" placeholder="1~2000位字符"
                                      required>[[${novelChapter.content}]]</textarea>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="button-box">
                <input type="submit" value="确定">
                <a class="no" href="#">关闭</a>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    // 监听关闭按钮
    $('#popups-form-box > .popups-window > form > .close').click(function (e) {
        e.preventDefault();
        $('#popups-box').hide();
        window.location.reload();
    });
    $('#popups-form-box > .popups-window > form > .button-box > .no').click(function (e) {
        e.preventDefault();
        $('#popups-box').hide();
        window.location.reload();
    });

    // 监听表单提交
    $('#popups-form-box > .popups-window > form').submit(function () {
        // 获取数据
        let novelId = $('#popups-form-box select[name="novelId"]').val();
        let index = $('#popups-form-box input[name="index"]').val();
        let name = $('#popups-form-box input[name="name"]').val();
        let content = $('#popups-form-box textarea[name="content"]').val();

        // 数据校验
        if (novelId === '0') {
            window.alert('请选择所属文章');
            return false;
        }

        // 提交数据
        $('#popups-form-box .main').html(`<span>数据提交中...</span>`);
        $.ajax({
            url: 'novel_chapter',
            type: "PUT",
            data: {
                'id': '[[${novelChapter.id}]]',
                'novelId': novelId,
                'index': index,
                'name': name,
                'content': content
            },
            success: function (res) {
                $('#popups-form-box input[type="submit"]').remove();
                $('#popups-form-box .main').html(res);
            }
        });

        return false;
    });

</script>
</body>
</html>
